<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.水平垂直居中</title>
    <style>
        .container{
            width: 100%;
            height: 300px;
            background: aqua;
        }
        .container .box{
            width: 20%;
            height: 20%;
            background: black;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <div>
            7种实现垂直水平居中的方式
        </div>
        <div>
            https://blog.csdn.net/c_x_m/article/details/123274543?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171323818216800226522395%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=171323818216800226522395&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-123274543-null-null.142^v100^pc_search_result_base1&utm_term=css%20%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD&spm=1018.2226.3001.4187
        </div>
    </div>
    <div>
        <h5>水平居中</h5>
        <div>
            <p>margin: 0 auto; 只能让有宽度的块元素水平居中对齐</p>
            <p>text-align: center; 让文字水平居中</p>
            <p>vertical-align：垂直对齐，它只针对行内元素或者行内块元素</p>
        </div>
        <div class="container margin">
            <div class="box">文字</div>
        </div>
    </div>
</body>
</html>
